<template>
  <div class="k2">
    <h3><dv-decoration-7>个人绩点对比</dv-decoration-7></h3>

    <dv-border-box-10 :color="['#50649a', '#50649b']">
      <button @click="sortByLastTerm" class="b1 daohang">上学期绩点排序</button>
      <button @click="sortByTotal" class="b2 daohang">总平均绩点排序</button>
      <div ref="myChart1" id="sexDiv"></div>
    </dv-border-box-10>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { zhuti } from "../assets/index.js";
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      chartData: {
        // 绩点数据
        // lastTerm为上学期
        // total为总
        data: [],
      },
      classInfo: [], //订阅的班级信息
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectClassInfo", (msgName, data) => {
      this.classInfo = data;
      this.getInfo();
    });
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/stuinfoall/list/${this.classInfo.year}/${this.classInfo.college}/${this.classInfo.major}/${this.classInfo.className}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("个人平均绩点", response.data.data);
        this.chartData.data = response.data.data;
        this.$nextTick(() => {
          this.renderChart();
        });
      });
    },
    renderChart() {
      const chart = echarts.init(this.$refs.myChart1, zhuti);
      const xAxisData = this.chartData.data.map((item) => item.stuName);
      const seriesData1 = this.chartData.data.map((item) => item.lastTerm);
      const seriesData2 = this.chartData.data.map((item) => item.total);

      const option = {
        // title: {
        //   text: "班级中个人绩点对比",
        // },
        tooltip: {},
        xAxis: {
          type: "category",
          data: xAxisData,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false },
          // 想让x轴所有名字都出来就把这里的注释解开但是数据太多了太杂乱了
          // axisLabel: {
          //   show: true,
          //   interval: 0,
          // },
        },
        yAxis: {
          type: "value",
          name: "绩点",
          splitLine: { show: false },
          // axisTick: { show: false },
          // axisLine: { show: false },
          // axisLabel: { show: false },
        },
        // 图例设置
        legend: {
          data: ["上学期", "总体"],
          orient: "vertical",
          x: "left", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 50,
            end: 100,
            xAxisIndex: [0, 1],
          },
          {
            type: "inside",
            realtime: true,
            start: 60,
            end: 100,
            xAxisIndex: [0, 1],
          },
        ],
        series: [
          {
            name: "上学期",
            type: "scatter",
            data: seriesData1,
            //图表的标线
            markLine: {
              data: [
                {
                  type: "average", //平均值
                  name: "平均值",
                },
              ],
            },
          },
          {
            name: "总体",
            type: "scatter",
            data: seriesData2,
            //图表的标线
            markLine: {
              data: [
                {
                  type: "average", //平均值
                  name: "平均值",
                },
              ],
            },
          },
        ],
      };

      chart.setOption(option);
      window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        chart.resize();
      });
    },
    sortByLastTerm() {
      this.chartData.data.sort((a, b) => a.lastTerm - b.lastTerm);
      this.renderChart();
    },
    sortByTotal() {
      this.chartData.data.sort((a, b) => a.total - b.total);
      this.renderChart();
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k2 {
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* position: relative; */
  /*width: 100%;
  height: 100%; */
}
h3 {
  font-size: 18px;
  width: 100%;
  height: 100%;
  line-height: 100%;
  flex: 1;
  color: aqua;
  /* margin-bottom: 10px; */
}
#sexDiv {
  width: 100%;
  height: 100%;
  flex: 9;
  padding: 10px;
}
.b1,
.b2 {
  position: absolute;
  width: 25%;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0;
  z-index: 999;
}
.b2 {
  right: 0;
}
.b1 {
  right: 25%;
}
.daohang {
  color: #79e2f9;
  background: rgba(112, 140, 210, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(112, 140, 210, 0.6);
  border-bottom: 1px solid rgba(112, 140, 210, 0.35);
  border-left: 1px solid rgba(112, 140, 210, 0.35);
}
</style>
